/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:20
* @LastEditors: WangXi
* @LastEditTime: 2023-06-20 17:30:02
* @Description: desc
*/
<template>
	<view class="address-container">
		<c-layout>
			<c-navigation-bar slot="head" :bgColor="true" :title="$t('addAddress.deliveryAddress')">
				<view slot="rightIcon" @click="manageAddress()" class="search-text">
					<text style="color: #F78585;">{{editState?$t('addAddress.Complete'):$t('addAddress.Manage')}}</text>
				</view>
			</c-navigation-bar>
			<view class="content-box">
				<!-- 地址列表 -->
				<scroll-view :scroll-y="true" class="address-list">
					<view class="address-box" v-for="(item,index) in addressData.records" :key="item.id">
						<!-- 收货人姓名 -->
						<view class="name-icon">
							<view class="">
								<text style="font-size: 14px; font-weight: bold;">{{item.userName}}</text>
								<text　style='width:10px;display: inline-block;'></text>
								<text style="color: #aaa;font-size: 12px;">{{item.mobile}}</text>
								
								<view class="address-info">
									<text>{{item.countryName}}</text>
									<text　style='width:10px;display: inline-block;'></text>
									<text>{{item.city}}</text>
									<text　style='width:10px;display: inline-block;'></text>
									<text>{{item.address}}</text>
								</view>
												
							</view>
						<image @click="editAddress(item.id)" style="width: 48rpx;height: 48rpx;"
							src="@/static/svg/bag-edit.svg" mode=""></image>
						</view>
					
				
						<view class="address-handle" v-if="editState">
							<view class="" @click="setDefaultAddress(item.id)">
								<view :class="`radio-box ${defaultAddressId === item.id?'is-checked':''}`">
								</view>
								<text>{{$t('addAddress.DefaultAddress')}} </text>
							</view>
							<text @click="delClick(item.id)">
								{{$t('system.delete')}}
							</text>
						</view>
					</view>
				</scroll-view>
				<view class="handel-button">
					<button type="default" @click="jumpAdd">
						{{$t('addAddress.newAddress')}}
					</button>
				</view>
			</view>
		</c-layout>

		<!-- 删除确认提示框 -->
		<promptDialog ref="promptDialog"></promptDialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 地址信息
				addressData: {
					records: []
				},
				// 获取地址信息的请求数据
				getAddressData: {
					"id": "",
					"pageNum": 1,
					"pageSize": 20000,
				},
				// 编辑状态
				editState: false,
				// 默认地址id
				defaultAddressId: '1',
				// 删除确认弹窗
				delQueryDailog: false,
				// 删除id
				delCurretAddressId: '',
			};
		},
		onLoad() {
			this.getAddressAjax()
		},
		methods: {
			// 获取地址信息
			getAddressAjax() {
				this.$u.post('/app/user/address/page', this.getAddressData).then(res => {
					this.addressData = res.data
					this.addressData.records.forEach(ele => {
						if (ele.defaultAddress) {
							this.defaultAddressId = ele.id
						}
					})
				})
			},
			// 复制地址信息
			copyAddressInfo(item) {
				uni.setClipboardData({
				        data: item,
				        success() {
				          uni.showToast({
				            title: '复制成功',
				            icon: 'success',
				          });
				        }
				      });
			},
			// 删除按钮点击
			delClick(id) {
				this.$refs.promptDialog.show({
					confirm: (close) => {
						this.delAddressAjax(this.delCurretAddressId, close)
					},
					des: this.$t('addAddress.deleteTips'),
					icon: 'tip',
					btnText: this.$t('system.affirm'),
					title: this.$t('settingInfo.hint')
				})
				this.delCurretAddressId = id
			},
			// 删除地址信息
			delAddressAjax(id = this.delCurretAddressId, close) {
				this.$u.delete('/app/user/address/' + id).then(res => {
					this.$u.toast(res.msg)
					this.getAddressAjax()
					close()
				})
			},
			dialogClose() {
				this.delQueryDailog = false
				this.delCurretAddressId = ''
			},
			// 设置默认地址
			setDefaultAddress(id) {
				this.$u.put('/app/user/address/default/' + id).then(res => {
					this.defaultAddressId = id
					this.$u.toast(res.msg)
				})
			},
			// 地址管理状态修改
			manageAddress(val) {
				this.editState = !this.editState
			},
			// 跳转添加地址
			jumpAdd(key) {
				uni.navigateTo({
					url: "/pages/addAddress/addAddress",
				})
			},
			// 编辑地址信息
			editAddress(id) {
				uni.navigateTo({
					url: "/pages/addAddress/addAddress?id=" + id,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address-container {
		font-family: PingFang SC;
		.search-text {
			height: 100%;
			display: flex;
			align-items: center;
		}

		.content-box {
			height: 100%;
			position: relative;
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;

			.address-list {
				// height: 100%;
				// padding-bottom: 150rpx;
				flex: auto;
				height: 0;

				.address-box {
					padding: 32rpx 0;
					position: relative;

					// border-bottom: 8rpx solid #F7F8FA;
					.name-icon {
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						>text {
							vertical-align: middle;
							font-size: 30rpx;
							font-weight: 500;
						}
					}

					.address-info {
						width: 572rpx;
						font-size: 26rpx;

						>text {
							color: #616161;
						}
					}

					&:not(:last-child)::after {
						position: absolute;
						content: '';
						width: 100vw;
						height: 8rpx;
						background-color: #F7F8FA;
						bottom: 0rpx;
						left: -30rpx;
					}

					.postal-code {
						display: flex;
						align-items: center;

						>text {
							color: #616161;
						}

						>image {
							margin-left: 5rpx;
						}
					}

					.address-handle {
						margin-top: 20rpx;
						padding: 20rpx 0;
						border-top: 2rpx solid #E1E8E8;
						display: flex;
						justify-content: space-between;
						color: #212121;

						>view {
							display: flex;
							align-items: center;
						}

						.radio-box {
							width: 28rpx;
							height: 28rpx;
							border: 2rpx solid #F78585;
							border-radius: 50%;
							margin-right: 5rpx;
							position: relative;

							&.is-checked::after {
								position: absolute;
								content: '';
								background-color: #F78585;
								width: 70%;
								height: 70%;
								border-radius: 50%;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
							}
						}

						>text {
							font-size: 26rpx;
						}
					}
				}
			}

			.handel-button {
				// position: absolute;
				background-color: #fff;
				width: calc(100%);
				bottom: 25rpx;
				// left: 0;
				margin: 20rpx 0;
			}
		}

	}
</style>
